import {Form, Modal, Row, Col, Input, Select} from 'antd';
import {useEffect} from 'react';
import {connect} from 'umi';
import styles from "../styles.less";

const DataForm = (props) => {
  const {dispatch, submitting} = props;
  const {dataForm, setDataForm, tablePayload, setTablePayload, setSelectedRow} = props.data;
  const [form] = Form.useForm();

  /* 初始化表单数据 */
  useEffect(() => {
    if (!dataForm || !dataForm.data) {
      form.setFieldsValue({status: 1});
    }
    if (dataForm && dataForm.data) {
      form.setFieldsValue({...dataForm.data});
    }
  }, [dataForm, form]);

  /* 确定操作 */
  function onOk() {
    form.validateFields().then(values => {
      if (submitting) {
        return;
      }
      let keys = Object.keys(values);
      keys.forEach(d => {
        values[d] = values[d] === null ? undefined : values[d];
      });
      dispatch({
        type: values.id ? 'PSystemDictLeft/edit' : 'PSystemDictLeft/add',
        payload: values,
        callback: () => {
          onCancel();
          setTablePayload({...tablePayload, page: 1});
          setSelectedRow(0);
        },
      });
    });
  }

  /* 取消操作 */
  function onCancel() {
    setDataForm(undefined);
    form.resetFields();
  }

  return (
    <Modal
      confirmLoading={submitting}
      title={dataForm ? dataForm.title : ''}
      open={dataForm ? dataForm.visible : false}
      onOk={onOk}
      onCancel={onCancel}
      forceRender={true}
      width={600}
      className={styles.myModal}
    >
      <Form layout="horizontal" labelCol={{span: 5}} form={form}>
        {dataForm && dataForm.data && (
          <Form.Item name="id" hidden={true}>
            <Input/>
          </Form.Item>
        )}
        <Row gutter={16}>
          <Col span={24}>
            <Form.Item
              name="dictName" label="字典名称"
              rules={[
                {required: true, message: '字典名称不能为空'},
              ]}>
              <Input placeholder="请输入字典名称"/>
            </Form.Item>
          </Col>
        </Row>
        <Row gutter={16}>
          <Col span={24}>
            <Form.Item
              name="dictCode" label="字典编号"
              rules={[
                {required: true, message: '字典编号不能为空'},
              ]}>
              <Input placeholder="请输入字典编号"/>
            </Form.Item>
          </Col>
        </Row>
        <Row gutter={16}>
          <Col span={24}>
            <Form.Item
              name="status" label="当前状态"
              rules={[
                {required: true, message: '当前状态不能为空'},
              ]}
            >
              <Select placeholder="请选择当前状态">
                <Select.Option value={1}>正常</Select.Option>
                <Select.Option value={0}>停用</Select.Option>
              </Select>
            </Form.Item>
          </Col>
        </Row>
        <Row gutter={16}>
          <Col span={24}>
            <Form.Item
              name="remark" label="备注信息"
              rules={[
                {required: false, message: '备注信息不能为空'},
              ]}
            >
              <Input.TextArea rows={3} placeholder="请输入备注信息"/>
            </Form.Item>
          </Col>
        </Row>
      </Form>
    </Modal>
  );
};


export default connect(({loading}) => {
  return {
    submitting: loading.effects['PSystemDictLeft/add'] || loading.effects['PSystemDictLeft/edit'],
  };
})(DataForm);

